<script setup lang="ts">
  import { getKeyArticleListReq } from '@/api'
  import { useSearchStore } from '@/store/search'
  import { storeToRefs } from 'pinia'
  import { onMounted, ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import { useKeyArticleStore } from '@/store/keyArticle'

  const keyArticleStore = useKeyArticleStore()
  const { keyArticle } = storeToRefs(keyArticleStore)

  const router = useRouter()

  const props = defineProps([
    'categoryLevel1',
    'categoryLevel2',
    'refreshCategoryData',
  ])

  const pointData = {
    id: 'point0001',
    name: '置顶',
    description: 'top',
  }

  const searchStore = useSearchStore()
  const { searchValue } = storeToRefs(searchStore)

  const sortCategory = ref<any[]>([])

  const sortData = () => {
    const copyData = JSON.parse(JSON.stringify(props.categoryLevel1))
    const data = copyData.sort((a: any, b: any) => {
      return b.isPoint - a.isPoint
    })
    sortCategory.value = [pointData, ...data]
  }

  // 获取重点文章
  const getKeyArticleList = async () => {
    const list = JSON.parse(JSON.stringify(props.categoryLevel2))
    if (list.length > 0) {
      list.forEach(async (item: any) => {
        const res = await getKeyArticleListReq({ parentCatId: item.id })
        if (res?.data?.length > 0) {
          keyArticleList.value.push({
            id: item.id,
            keyList: res.data,
          })
        }
      })
    }
  }

  watch(
    () => props.categoryLevel1,
    () => {
      sortData()
    },
    { immediate: true }
  )

  const keyArticleList = ref<any[]>([])
  watch(
    () => props.categoryLevel2,
    () => {
      if (props.categoryLevel2.length > 0) {
        getKeyArticleList()
      }
    },
    { immediate: true }
  )

  watch(searchValue, () => {
    if (searchValue.value) {
      sortCategory.value = [
        {
          id: 'search0001',
          name: '搜索',
          description: 'search',
        },
      ]
    } else {
      sortData()
    }
  })

  // 点击子分类
  const handleClickSub = (subItem: any) => {
    router.replace({
      name: 'SubCategory',
      query: {
        id: subItem.id,
        name: subItem.name,
      },
    })
  }

  onMounted(() => {
    // 重置全局状态
    if (keyArticle.value) keyArticle.value = {}
  })

  // 点击重点文章
  const handleClickKeyArticle = (article: any, subItem: any) => {
    // 全局状态
    keyArticle.value = article
    router.replace({
      name: 'Article',
      query: {
        id: subItem.id,
        name: subItem.name,
      },
    })
  }
</script>

<template>
  <a-layout-content class="content">
    <a-row
      v-for="item in sortCategory"
      :key="item.id"
    >
      <a-divider orientation="left"
        >{{ item.name }}
        <span class="mainDescription">{{
          item.description || ''
        }}</span></a-divider
      >
      <a-col
        :span="24"
        class="category-col"
      >
        <a-card
          style="width: 300px; height: 200px"
          size="small"
          hoverable
          v-for="subItem in item.name === '搜索'
            ? categoryLevel2.filter((sub: any) =>
                sub?.name?.includes(searchValue)
              )
            : item.name === '置顶'
              ? categoryLevel2.filter((sub: any) => sub.isPoint)
              : categoryLevel2.filter((sub: any) => sub.parentId === item.id)"
          :key="subItem.id"
        >
          <template #extra>
            <RightOutlined
              style="font-size: 14px; cursor: pointer"
              @click="handleClickSub(subItem)"
            />
          </template>
          <template #title>
            <div
              class="title"
              @click="handleClickSub(subItem)"
            >
              <span class="titleSpan"></span>
              <h4>{{ subItem.name }}</h4>
              <span class="descript">{{ subItem.description }}</span>
            </div>
          </template>
          <div style="padding-top: 10px">
            <!-- 重点文章,按置顶排序,只显示4条 -->
            <div
              v-if="
                keyArticleList.length > 0 &&
                keyArticleList.find((it) => it.id === subItem.id)?.keyList
                  .length > 0
              "
              v-for="keyArticle in keyArticleList
                .find((it) => it.id === subItem.id)
                ?.keyList?.sort((a: any, b: any) => b.isPoint - a.isPoint)
                ?.slice(0, 4) || []"
              :key="keyArticle.id"
              class="keyArticle"
              @click="handleClickKeyArticle(keyArticle, subItem)"
            >
              {{ keyArticle.title }}
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-layout-content>
</template>

<style scoped lang="less">
  .content {
    .mainDescription {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.3);
    }

    .category-col {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 24px;
    }

    .title {
      display: flex;
      align-items: center;
    }

    .titleSpan {
      width: 4px;
      height: 14px;
      background-color: var(--color-blue);
      display: inline-block;
      margin-right: 8px;
      position: relative;
    }

    .keyArticle {
      font-size: 14px;
      margin-top: 6px;
      cursor: pointer;
    }

    .keyArticle:hover {
      color: var(--color-blue);
    }

    .descript {
      margin-left: 10px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.3);
    }

    p {
      color: rgba(0, 0, 0, 0.8);
      cursor: pointer;
    }

    p:hover {
      color: var(--color-blue);
    }

    .ant-card-extra {
      span:hover {
        color: var(--color-blue);
      }
    }
  }
</style>
